<template>
  <div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold text-gray-800">我的收藏</h1>
      <div v-if="loading" class="ml-2">加载中...</div>
    </div>

    <!-- 无数据提示 -->
    <div v-if="articleList.length === 0" class="text-center py-10">
      <el-empty description="暂无收藏文章" />
    </div>

    <!-- 文章列表 -->
    <div v-else class="grid gap-6">
      <div v-for="article in articleList" :key="article.id" 
           class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
        <div class="p-6">
          <div class="flex justify-between items-start">
            <div class="flex-1">
              <h2 class="text-xl font-semibold text-gray-800 mb-2">
                <router-link :to="{ path: '/article/detail', query: { articleId: article.id } }" class="hover:text-blue-600">
                  {{ article.title }}
                </router-link>
              </h2>
              <p class="text-gray-600 mb-4">{{ article.description }}</p>
              
              <div class="flex items-center space-x-4 text-sm text-gray-500">
                <span class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                  </svg>
                  {{ article.readNum || 0 }}
                </span>
                <span class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                  </svg>
                  {{ article.favoriteCount || 0 }}
                </span>
                <span>{{ article.createTime }}</span>
              </div>
            </div>
            
            <!-- 尝试多个可能的图片字段名 -->
            <div v-if="article.titleImage || article.cover || article.title_image" class="ml-4">
              <img :src="article.titleImage || article.cover || article.title_image" 
                   :alt="article.title" 
                   class="w-32 h-24 object-cover rounded"
                   @error="e => e.target.style.display = 'none'">
            </div>
          </div>
          
          <div class="mt-4 flex flex-wrap gap-2">
            <span v-for="tag in article.tags" :key="tag.id" 
                  class="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">
              {{ tag.name }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div v-if="total > 0" class="mt-8 flex justify-center">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getFavoriteArticles } from '@/api/backend/article'
import { ElMessage } from 'element-plus'

const articleList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const loading = ref(false)

// 获取收藏文章列表
const getList = async () => {
  loading.value = true
  try {
    const res = await getFavoriteArticles(currentPage.value, pageSize.value);
    
    if (res.success) {
      articleList.value = res.data.records || [];
      total.value = res.data.total || 0;
    } else {
      console.error('获取收藏文章列表失败，响应码：', res.errorCode, '消息：', res.message);
      ElMessage.error(res.message || '获取收藏列表失败');
    }
  } catch (error) {
    console.error('获取收藏文章列表失败:', error);
    ElMessage.error('获取收藏列表失败，请检查网络连接');
  } finally {
    loading.value = false
  }
}

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  getList()
}

// 处理每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  getList()
}

onMounted(() => {
  getList()
})
</script> 